<template>
  <div class="trajectory">
    <!-- 页面主体 -->
    <v-main>
      <div class="trajectory-tabs">
        <el-tabs v-model="tabName">
          <!-- tab - 动线排行 -->
          <el-tab-pane label="动线排行" name="lineRank">
            <v-line-rank></v-line-rank>
          </el-tab-pane>
          <!-- tab - 动线路径 -->
          <el-tab-pane label="动线路径" name="linePath">
            <v-line-path></v-line-path>
          </el-tab-pane>
        </el-tabs>
      </div>
    </v-main>
  </div>
</template>
<script type="text/ecmascript-6">
// components
import MainComp from '@/components/main'
// element-ui
import { Tabs, TabPane } from 'element-ui'

// page functional module
import LineRank from './lineRank/lineRank.vue'
import LinePath from './linePath/linePath.vue'
// api

/**
 * Parse, validate, manipulate, and display dates in javascript
 * @Documents http://momentjs.com/
 */
// import Moment from 'moment'
// import Config from '@/utils/config.js'

export default {
  name: 'trajectory',

  components: {
    // elementUI component
    elTabs: Tabs,
    elTabPane: TabPane,
    // 项目自定义组件
    vMain: MainComp,
    // 功能模块
    vLineRank: LineRank,
    VLinePath: LinePath
  },

  created () {
    // init request
  },
  data () {
    return {
      tabName: 'lineRank'
    }
  },

  computed: {
  },

  methods: {
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  .trajectory {
    box-sizing: border-box;
    padding: 20px;
    width: 100;
    background-color: #FFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
    .page_name {
      margin-bottom: 10px;
      .title{
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
</style>
